﻿<!DOCTYPE html>
<html>
<head>
	<title>onyx button sample</title>
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../onyx/package.js" type="text/javascript"></script>
	<style>
		body {
			margin: 10px;
		}
		p {
			color: #F49200;
			text-transform: uppercase;
			font-family: Segoe UI, Prelude Medium, sans;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 8px;
		}
	</style>
</head>
<body>
	<script>
		new (enyo.kind({
			name: "App",
			components: [
				{tag: "p", content: "Onyx Button"},
				{kind: "onyx.Button", content: "I am an Onyx Button!"},
				{tag: "br"},
				{tag: "p", content: "Onyx Button with an image and content"},
				{kind: "onyx.Button", components: [
					{tag: "img", attributes: {src: "favicon.ico"}},
					{content: "There is an image here"}
				]},
				{tag: "br"},
				{tag: "p", content: "Onyx Button with an image and content, and disabled"},
				{kind: "onyx.Button", disabled: true, components: [
					{tag: "img", attributes: {src: "favicon.ico"}},
					{content: "There is an image here"}
				]},
				{tag: "br"},
				{tag: "p", content: "Onyx Button with an icon"},
				{kind: "onyx.Button", components: [
					{kind: "onyx.Icon", src: "fish_bowl.png"}
				]},
				{tag: "br"}
			]
		}))().write();
	</script>
</body>
</html>
